{% extends "auth-menu.html" %}
{% load tag %}
{% block head %}

{#  没有需要加载的文件#}
 {% endblock %}

{% block display1 %}
    "display: block"
{% endblock %}

{% block active1 %}
    'active'
{% endblock %}

{% block active_sub6 %}
    'active'
{% endblock %}

{% block main %}
   <div class='span12'>
        <div class='page-header'>
            <h1 class='pull-left'>
                <i class='icon-edit'></i>
                <span>数据源展示</span>
            </h1>
            <div class='pull-right'>
                <ul class='breadcrumb'>
                    <li>
                        <a href="/index"><i class='icon-bar-chart'></i>
                        </a>
                    </li>
                    <li class='separator'>
                        <i class='icon-angle-right'></i>
                    </li>
                    <li>
                        数据源统计
                    </li>
                    <li class='separator'>
                        <i class='icon-angle-right'></i>
                    </li>
                    <li class='active'>货运数据源</li>
                </ul>
            </div>
        </div>
    </div>
{#{% for i in gps_data_list %}#}
{#    {% print i %}#}
{#    {% endfor %}#}
<div class='group-header'>
    <div class='row-fluid'>
        <div class='span12 offset1'>
            {{ no_data }}
       <h4><p class='text-success'> 时间:{{ time_str }}&nbsp  文件:{{ timeid }} &nbsp 车辆数:{{ cars }} &nbsp 位置点:{{ data_total }}</p></h4>
        </div>
    </div>
</div>


<div class='row-fluid'>
    <div class='span12 offset1'>
    <div id="main1" style="width: 800px;height:600px;"></div>
    <script type="text/javascript">

var Chart1 = echarts.init(document.getElementById('main1'));
// 指定图表的配置项和数据

    Chart1.showLoading({
        text: '正在努力的读取数据中...'
    });


var placeList = [
    {% for i in list %}
    { name:'0', geoCoord:{{ i | safe }} },

    {% endfor %}
{#    { name:'0', geoCoord:[120.308632,36.680232] }#}
]
option = {
{#    backgroundColor: '#1b1b1b',#}
    color: [
        'rgba(0, 255, 255, 0.8)',
{#        'rgba(14, 241, 242, 0.8)',#}
{#        'rgba(37, 140, 249, 0.8)'#}
    ],
    title : {
        text: '货运全国覆盖情况',
        subtext: '随机挑选10万位置点',
        x:'center',
        textStyle : {
            color: '#00ff32'
        },
    },
    legend: {
        show:false,
{#        隐藏后看不到文字，图中标点可以改变颜色#}
        orient: 'vertical',
        x:'left',
        data:['位置点'],
        textStyle : {
            color: '#00ffff'
        }
    },
    toolbox: {
        show : true,
        orient : 'vertical',
        x: 'right',
        y: 'center',
        feature : {
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    series : [

        {
            name: 'gpspoint',
            type: 'map',
            mapType: 'china',
            hoverable: false,
            roam:true,
            data : [],
            markPoint : {
                symbol : 'heart',
                symbolSize: 1,
                large: true,
                effect : {
                    show: false,
{#                    color: '#00ff32',#}
{#                    loop:false,#}
                },
                data : (function(){
                    var data = [];
                    var len = placeList.length;
                    while(len--) {
                        data.push({
                            name : placeList[len].name,
                            value : 90,
                            geoCoord : placeList[len].geoCoord
                        })
                    }
                    return data;
                })()
            }
        }
    ]
};


    Chart1.setOption(option);
    {#        // 使用刚指定的配置项和数据显示图表。#}


    Chart1.hideLoading();


    </script>
</div>

</div>

{##}
{#<div class='row-fluid'>#}
{#<div class='span12 box bordered-box orange-border' style='margin-bottom:0;'>#}
{#<div class='box-header orange-background'>#}
{#    <div class='title'>{{ date }} 出租车数据源情况</div>#}
{#    <div class='actions'>#}
{#        <a href="#" class="btn box-remove btn-mini btn-link"><i class='icon-remove'></i>#}
{#        </a>#}
{#        <a href="#" class="btn box-collapse btn-mini btn-link"><i></i>#}
{#        </a>#}
{#    </div>#}
{#</div>#}
{#<div class='box-content box-no-padding'>#}
{#<div class='responsive-table'>#}
{#<div class='scrollable-area'>#}
{#<table class='data-table table table-bordered table-striped' style='margin-bottom:0px;'>#}
{#<table class="table table-striped table-bordered table-hover datatable" style='margin-bottom:0px;'>#}
{#<thead>#}
{#<tr>#}
{# {% for i in table_header %}#}
{#     <th  class="sorting_asc" aria-label="Rendering engine: activate to sort column descending" aria-sort="ascending" style="width: 240px;" colspan="1" rowspan="1" aria-controls="DataTables_Table_0" tabindex="0" role="columnheader" class="sorting_asc">{{ i }}</th>#}
{#{% endfor %}#}
{#</tr>#}
{#</thead>#}
{#<tbody>#}
{#<tr>#}
{#    <td>Sigurd Klocko</td>#}
{#    <td>norene@hotmail.com</td>#}
{#    <td>#}
{#        <span class='label label-important'>Important</span>#}
{#    </td>#}
{#    <td>#}
{#        <div class='text-right'>#}
{#            <a class='btn btn-success btn-mini' href='#'>#}
{#                <i class='icon-ok'></i>#}
{#            </a>#}
{#            <a class='btn btn-danger btn-mini' href='#'>#}
{#                <i class='icon-remove'></i>#}
{#            </a>#}
{#        </div>#}
{#    </td>#}
{#      <td>Sigurd Klocko</td>#}
{#      <td>Sigurd Klocko</td>#}
{#      <td>Sigurd Klocko</td>#}
{#      <td>Sigurd Klocko</td>#}
{#      <td>Sigurd Klocko</td>#}
{#</tr>#}
{#{% for row in access_data %}#}
{#    <tr>#}
{##}
{#    {% for field in row %}#}
{##}
{#        <td>{{ field|escape|default:"" }}</td>#}
{##}
{#    {% endfor %}#}
{#    </tr>#}
{#{% endfor %}#}
{##}
{##}
{##}
{##}
{##}
{#</tbody>#}
{#</table>#}
{#</div>#}
{#</div>#}
{#</div>#}
{#</div>#}
{#</div>#}
<hr class='hr-double' />

</div>
</div>
</div>
</section>
</div>
{% endblock %}

{% block script %}

{#表格JS#}
<script src='/bootstrap/assets/javascripts/plugins/datatables/jquery.dataTables.min.js' type='text/javascript'></script>
<script src='/bootstrap/assets/javascripts/plugins/datatables/jquery.dataTables.columnFilter.js' type='text/javascript'></script>

<script src='/bootstrap/assets/javascripts/plugins/common/bootstrap-wysihtml5.js' type='text/javascript'></script>

<!-- / naked password -->
<script src='/bootstrap/assets/javascripts/plugins/naked_password/naked_password-0.2.4.min.js' type='text/javascript'></script>
<!-- / nestable -->
<script src='/bootstrap/assets/javascripts/plugins/nestable/jquery.nestable.js' type='text/javascript'></script>
{#<!-- / tabdrop -->#}
<script src='/bootstrap/assets/javascripts/plugins/tabdrop/bootstrap-tabdrop.js' type='text/javascript'></script>

<script src='/bootstrap/assets/javascripts/tables.js' type='text/javascript'></script>
<!-- / max length -->
<script src='/bootstrap/assets/javascripts/plugins/bootstrap_maxlength/bootstrap-maxlength.min.js' type='text/javascript'></script>
<!-- / timeago -->
<script src='/bootstrap/assets/javascripts/plugins/timeago/jquery.timeago.js' type='text/javascript'></script>

<!-- / autosize (for textareas) -->
<script src='/bootstrap/assets/javascripts/plugins/autosize/jquery.autosize-min.js' type='text/javascript'></script>
<!-- / charCount -->
<script src='/bootstrap/assets/javascripts/plugins/charCount/charCount.js' type='text/javascript'></script>
<script>

$.datetimepicker.setLocale('ch');

{#$('#datetimepicker_format').datetimepicker({format: $("#datetimepicker_format_value").val()});#}
{#console.log($('#datetimepicker_format').datetimepicker('getValue'));#}

$("#datetimepicker_format_change").on("click", function(e){
	$("#datetimepicker_format").data('xdsoft_datetimepicker').setOptions({format: $("#datetimepicker_format_value").val()});
});
$("#datetimepicker_format_locale").on("change", function(e){
	$.datetimepicker.setLocale($(e.currentTarget).val());
});

$('#datetimepicker').datetimepicker({
dayOfWeekStart : 1,
lang:'ch',
timepicker:false,
format:"Y-m-d",
{#disabledDates:['1986/01/08','1986/01/09','1986/01/10'],#}
{#startDate:	'1986/01/05'#}
});
{#$('#datetimepicker').datetimepicker({value:{{ date|date:"Y-m-d H:i" }}, step:10});#}
{#$('#datetimepicker').datetimepicker({ step:10});#}
</script>
{% endblock %}
